<template>
    <div style="">
        <table class="mytable">

            <tr><td>基础用法</td><td>
                <div class="myRadio">
                    <el-radio v-model="radio" label="1">选项1</el-radio>
                    <el-radio v-model="radio" label="2">选项2</el-radio>
                </div>
            </td></tr>

            <tr><td>禁用状态</td><td>
                <div class="myRadio" >
                    <el-radio v-model="radio" label="1" disabled >选项1</el-radio>
                    <el-radio v-model="radio" label="2" disabled>选项2</el-radio>
                </div>
            </td></tr>

            <tr><td>单选框组</td><td>
                <el-radio-group v-model="radio">
                    <el-radio :label="3">备选项</el-radio>
                    <el-radio :label="6">备选项</el-radio>
                    <el-radio :label="9">备选项</el-radio>
                </el-radio-group>
            </td></tr>

            <tr><td>单选按钮组</td><td>
                <el-radio-group v-model="radio" size="mini">
                    <el-radio-button :label="3">备选项</el-radio-button>
                    <el-radio-button :label="6">备选项</el-radio-button>
                    <el-radio-button :label="9">备选项</el-radio-button>
                </el-radio-group>
            </td></tr>

            <tr><td>带有边框的单选按钮组</td><td>
                <el-radio-group v-model="radio" size="mini">
                    <el-radio-button border  :label="3">备选项</el-radio-button>
                    <el-radio-button border  :label="6">备选项</el-radio-button>
                    <el-radio-button border  :label="9">备选项</el-radio-button>
                </el-radio-group>
            </td></tr>

        </table>

    </div>
</template>

<style>
    .mytable {
        width: 100%;
        border: 1px dotted black;
    }

    .mytable tr td {
        border: 1px dotted black;
    }

    .mytable tr td:first-child {
        width: 25%;
    }
</style>

<script>
    export default {
        name: "my-el-radio",
        data () {
            return {
                radio: '1'
            };
        }
    }
</script>

